<template>
  <el-dialog
    v-model="dialogVisible"
    v-if="load"
    title="运营审核情况"
    width="760"
    :close-on-click-modal="false"
    @close="handleClose"
    :z-index="2000"
  >
    <vxe-table
      ref="tableRef"
      height="500"
      :column-config="{ resizable: true }"
      :row-config="{ isHover: true }"
      :data="tableData"
    >
      <vxe-column title="运营人员" field="review_user_id_text" width="120"></vxe-column>
      <vxe-column title="审核结果" field="status_text" width="120"></vxe-column>
      <vxe-column title="审核备注" field="remark" width="200"></vxe-column>
      <vxe-column title="评分" field="score" width="100"></vxe-column>
      <vxe-column title="审核时间" field="review_time" width="180"></vxe-column>
    </vxe-table>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { operateReviewRecord } from "../api";
import { ref, reactive, onMounted, toRefs } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const data = reactive({
  dialogVisible: false,
  tableData: [],
  load: false,
});

const { dialogVisible, tableData, load } = toRefs(data);

const initData = (task_id) => {
  operateReviewRecord({
    task_id,
  }).then(({ total, data }) => {
    tableData.value = data;
  });
};

const open = async (task_id) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  dialogVisible.value = true;
  initData(task_id);
};
const handleClose = () => {
  dialogVisible.value = false;
};

defineExpose({ open });
</script>
<style scoped>
:deep(.vxe-pager.is--perfect) {
  border: 0;
}
</style>
